ReactNative SafeAreaViewに詰まらないために

概要

React NativeでSafeAreaViewを使う際、同じようなライブラリが複数あって混乱する。

最低でもreact-native、react-native-safe-area-context、react-native-safe-area-viewの3つのライブラリからimportできる。

「どれでも良いのでは？」と思うかもしれないが、実はどれでも良くない。ちゃんとした物を使わないと、予想通りの動作をしない。絶対に詰まることになる。

備忘録として、対策を残しておく。

SafeAreaViewとは

一番参考になる

まとめ

SafeAreaViewは必ずSafeAreaProviderで囲む。

SafeAreaProviderはreact-native-safe-area-contextからimportできる。

特別な要求が無い限りはreact-nativeのSafeAreaViewで十分。ちゃんと機能する。

特別な要求（ex：ページ下部だけ適用させたい）がある場合は、react-native-safe-area-viewのSafeAreaViewを利用する。

詳細

一番重要なこととして、必ずSafeAreaProviderでラップしておくこと。

こいつが無いと、SafeAreaViewがうまいこと機能しないことがある。

基本的にはreact-nativeのSafeAreaViewで十分である。

ナビゲーション（react-navigation/native）などを利用しない限りは、標準のもので十分。

使っておけば、ページ上部、下部ともにSafeAreaを適用してくれる。

「ページ下部だけ適用させたい」と言ったような標準から少し外れるような機能を使いたいならreact-native-safe-area-viewを使う。

ナビゲーションを利用する場合も、こいつを使っておけば安心。

ちなみに「ページ下部だけ適用させたい」場合の実装は以下

code: sample.js

<Text style={styles.paragraph}>This is bottom text.</Text>

</SafeAreaView>

forceInsetというプロパティを利用すれば適用できる。

参考